# 创建新的 Hot.vue 文件
<template>
  <div class="hot-page-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <a-card>
        <div class="header-content">
          <div class="left">
            <h2 class="title">热门内容</h2>
            <p class="description">发现最受欢迎的帖子和讨论</p>
          </div>
        </div>
      </a-card>
    </div>

    <div class="content-container">
      <a-row :gutter="16">
        <a-col :span="18">
          <!-- 筛选栏 -->
          <a-card class="filter-card">
            <a-space size="large">
              <!-- 分类筛选 -->
              <a-radio-group v-model:value="category" button-style="solid">
                <a-radio-button value="all">全部</a-radio-button>
                <a-radio-button value="tech">技术</a-radio-button>
                <a-radio-button value="life">生活</a-radio-button>
                <a-radio-button value="chat">闲聊</a-radio-button>
              </a-radio-group>

              <!-- 时间范围 -->
              <a-select
                v-model:value="timeRange"
                style="width: 120px"
                @change="handleTimeRangeChange"
              >
                <a-select-option value="all">全部时间</a-select-option>
                <a-select-option value="day">24小时内</a-select-option>
                <a-select-option value="week">本周内</a-select-option>
                <a-select-option value="month">本月内</a-select-option>
              </a-select>

              <!-- 排序方式 -->
              <a-select
                v-model:value="sortType"
                style="width: 120px"
                @change="handleSortChange"
              >
                <a-select-option value="hot">按热度</a-select-option>
                <a-select-option value="views">按浏览量</a-select-option>
                <a-select-option value="replies">按回复数</a-select-option>
                <a-select-option value="likes">按点赞数</a-select-option>
              </a-select>
            </a-space>
          </a-card>

          <!-- 热门帖子列表 -->
          <a-card class="posts-card">
            <a-list 
              :data-source="hotPosts" 
              :loading="loading"
              :pagination="pagination"
            >
              <template #renderItem="{ item }">
                <a-list-item class="post-item hover-shadow">
                  <a-list-item-meta>
                    <template #avatar>
                      <a-avatar :src="item.authorAvatar" />
                    </template>
                    <template #title>
                      <router-link :to="`/post/${item.id}`" class="post-title">
                        {{ item.title }}
                      </router-link>
                    </template>
                    <template #description>
                      <div class="post-meta">
                        <a-space>
                          <span class="author">{{ item.author }}</span>
                          <span><EyeOutlined /> {{ item.views }}</span>
                          <span><MessageOutlined /> {{ item.replies }}</span>
                          <span><LikeOutlined /> {{ item.likes }}</span>
                          <span><ClockCircleOutlined /> {{ item.createTime }}</span>
                        </a-space>
                      </div>
                    </template>
                  </a-list-item-meta>
                  <div class="post-stats">
                    <a-tag class="category-tag">{{ item.category }}</a-tag>
                    <a-tag v-if="item.isHot" color="red">热门</a-tag>
                    <a-tag v-if="item.isTop" color="orange">置顶</a-tag>
                  </div>
                </a-list-item>
              </template>
            </a-list>
          </a-card>
        </a-col>

        <a-col :span="6">
          <!-- 热门标签 -->
          <a-card title="热门标签" class="side-card">
            <template #extra><a>更多</a></template>
            <div class="tag-cloud">
              <a-tag 
                v-for="tag in hotTags" 
                :key="tag.name"
                :color="tag.color"
                class="tag-item"
              >
                {{ tag.name }}
                <span class="tag-count">{{ tag.count }}</span>
              </a-tag>
            </div>
          </a-card>

          <!-- 热门作者 -->
          <a-card title="热门作者" class="side-card">
            <template #extra><a>更多</a></template>
            <a-list :data-source="hotAuthors" size="small">
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-list-item-meta>
                    <template #avatar>
                      <a-avatar :src="item.avatar" />
                    </template>
                    <template #title>
                      <a>{{ item.name }}</a>
                    </template>
                    <template #description>
                      <div class="author-stats">
                        <span>发帖 {{ item.posts }}</span>
                        <span>获赞 {{ item.likes }}</span>
                      </div>
                    </template>
                  </a-list-item-meta>
                </a-list-item>
              </template>
            </a-list>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { 
  EyeOutlined, 
  MessageOutlined, 
  LikeOutlined, 
  ClockCircleOutlined 
} from '@ant-design/icons-vue'

// 状态
const loading = ref(false)
const category = ref('all')
const timeRange = ref('all')
const sortType = ref('hot')

// 分页配置
const pagination = {
  pageSize: 10,
  total: 100,
  current: 1,
  showQuickJumper: true,
  showSizeChanger: true,
  showTotal: total => `共 ${total} 个帖子`
}

// 热门帖子数据
const hotPosts = ref([
  {
    id: 1,
    title: '分享一个有趣的技术发现',
    author: '技术达人',
    authorAvatar: 'https://joeschmoe.io/api/v1/random',
    views: 1580,
    replies: 35,
    likes: 128,
    createTime: '2024-03-20',
    category: '技术交流',
    isHot: true,
    isTop: true
  },
  {
    id: 2,
    title: '新手求助：如何开始学习编程？',
    author: '学习者',
    authorAvatar: 'https://joeschmoe.io/api/v1/random',
    views: 1200,
    replies: 28,
    likes: 89,
    createTime: '2024-03-19',
    category: '技术交流',
    isHot: true
  }
])

// 热门标签
const hotTags = ref([
  { name: 'JavaScript', count: 328, color: '#1890ff' },
  { name: 'Vue3', count: 256, color: '#52c41a' },
  { name: 'React', count: 198, color: '#722ed1' },
  { name: 'TypeScript', count: 167, color: '#faad14' },
  { name: 'Node.js', count: 145, color: '#13c2c2' }
])

// 热门作者
const hotAuthors = ref([
  {
    name: '技术达人',
    avatar: 'https://joeschmoe.io/api/v1/random',
    posts: 56,
    likes: 1328
  },
  {
    name: '前端专家',
    avatar: 'https://joeschmoe.io/api/v1/random',
    posts: 43,
    likes: 892
  },
  {
    name: '全栈工程师',
    avatar: 'https://joeschmoe.io/api/v1/random',
    posts: 38,
    likes: 756
  }
])

// 加载热门帖子
const loadHotPosts = async () => {
  loading.value = true
  try {
    // 模拟API调用，实际项目中应该调用后端API
    await new Promise(resolve => setTimeout(resolve, 500))
    // 这里应该根据筛选条件请求后端数据
  } catch (error) {
    console.error('Failed to load hot posts:', error)
  } finally {
    loading.value = false
  }
}

// 处理时间范围变化
const handleTimeRangeChange = (value) => {
  timeRange.value = value
  loadHotPosts()
}

// 处理排序方式变化
const handleSortChange = (value) => {
  sortType.value = value
  loadHotPosts()
}

// 初始化
onMounted(() => {
  loadHotPosts()
})
</script>

<style lang="scss" scoped>
.hot-page-container {
  padding: 24px;
  background: #f0f2f5;
  min-height: calc(100vh - 64px);

  .page-header {
    margin-bottom: 24px;

    .header-content {
      .title {
        margin: 0;
        font-size: 24px;
        font-weight: bold;
        background: linear-gradient(45deg, #ff4d4f, #ff7a45);
        -webkit-background-clip: text;
        color: transparent;
      }

      .description {
        margin: 8px 0 0;
        color: rgba(0, 0, 0, 0.45);
      }
    }
  }

  .filter-card {
    margin-bottom: 16px;
  }

  .posts-card {
    .post-item {
      transition: all 0.3s ease;
      border-radius: 8px;
      margin-bottom: 16px;
      padding: 16px;
      background: #fff;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .post-title {
        font-size: 16px;
        font-weight: 500;
        color: #1f1f1f;
        
        &:hover {
          color: #1890ff;
        }
      }

      .post-meta {
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;

        .author {
          color: #1890ff;
          font-weight: 500;
        }
      }

      .post-stats {
        display: flex;
        gap: 8px;
        align-items: center;

        .category-tag {
          background: #f0f5ff;
          color: #1890ff;
          border: none;
        }
      }
    }
  }

  .side-card {
    margin-bottom: 16px;

    .tag-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;

      .tag-item {
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
          transform: scale(1.05);
        }

        .tag-count {
          margin-left: 4px;
          opacity: 0.8;
        }
      }
    }

    .author-stats {
      display: flex;
      gap: 16px;
      color: rgba(0, 0, 0, 0.45);
    }
  }
}
</style> 